<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <script src="../js/vue2-dev.js"></script>
    </head>
    <body>
        <!-- 
            1.计算属性就是通过vue实例已有的属性得到的数据
            2.底层实现依然是Object.defineProperty这个方法
            3.计算属性只会执行一次，然后就会放入缓存，之后再读取到这个计算属性，就会直接获取
              区别于methods方法，methods方法使用几次就会执行几次方法体，计算属性放在computed属性中
            4.当计算属性所依赖的数据发生变化的时候，计算属性就会重新计算赋值，并且更新页内元素
         -->

        <div id="root">
            firstName：<input v-model="firstName" />
            <br />
            lastName：<input v-model="lastName" />
            <br />
            fullName：<input v-model="fullName" />
        </div>

        <script>
            const vm = new Vue({
                data: {
                    firstName: "徐",
                    lastName: "虎",
                },
                computed: {
                    // 完整写法
                    fullName: {
                        get() {
                            return this.firstName + "-" + this.lastName;
                        },
                        set(value) {
                            let arr = value.split("-");
                            this.firstName = arr[0];
                            this.lastName = arr[1];
                        },
                    },
                    // // 简写（确定当前计算属性只读不写，省略set）
                    // fullName() {
                    //     return this.firstName + "-" + this.lastName;
                    // },
                },
            });

            vm.$mount("#root");
        </script>
    </body>
</html>
